<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/cart.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/damai.js"></script>

</head>
<body>
<div id="app">
	<damai>
		<div class="container cart">
		<div class="span24">
		
		
		<div class="step step1">
				购物车列表
			</div>
				<table>
					<tbody><tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
					
						<tr v-for=" c in carts">
							<td width="60">
								<img :src="c.product.image">
							</td>
							<td>
								<a>{{c.product.pname}}</a>
							</td>
							<td>
								￥{{c.product.shopPrice}}
							</td>
							<td class="quantity" width="60">
								{{c.count}}
							</td>
							<td width="140">
								<span class="subtotal">￥{{c.product.shopPrice * c.count}}</span>
							</td>
							<td>
								<a href="#" @click.prevent="del(c.pid)" class="delete">删除</a>
							</td>
						</tr>
				
				</tbody></table>
				
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
							<em>
								登录后确认是否享有优惠
							</em>
					赠送积分:
					<em v-if="carts.length" id="effectivePoint">
						{{carts.map(c=>c.count*c.product.shopPrice).reduce((a,b)=>a+b)}}
					</em>
					商品金额:
					<strong v-if="carts.length" id="effectivePrice">
						{{carts.map(c=>c.count*c.product.shopPrice).reduce((a,b)=>a+b)}}
					</strong>
				</div>
				<div class="bottom">
					<a href="cart.html" id="clear" class="clear">清空购物车</a>
					<a href="pay.html" id="submit" class="submit">提交订单</a>
				</div>
			
		</div>
	</div>
	</damai>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data:{
			carts:[]
		},
		created(){
			axios.get("/cart/mycart").then(res=>{
				this.carts = res.data;
			})
		},
		methods:{
			del(pid){
				if(confirm("请确认是否要删除该购物车商品?")){
					axios("/cart/del?pid=" + pid).then(res=>{
						if(res.data.code == 1){
							this.carts = this.carts.filter(c=>c.pid!=pid);
						}
					})
				}

			}
		}
	})
</script>
</body></html>